<template>
  <el-dialog title="审核详情" :model-value="show" @close="$emit('close')">
    <div class="detail-bg">
      <div class="left-detail" v-if="data">
        <div
          class="detail-img flex-center"
          v-for="(item, idx) in data"
          :key="'ii' + idx"
          @click="clickImg(item, idx)"
        >
          <img :src="item.img_url" alt="" />
        </div>
      </div>
      <div class="right-detail flex-center">
        <div class="img-count flex-center">{{ selectImg.idx + 1 }}/{{ data.length }}</div>
        <img class="preview-detail" :src="selectImg.url" alt="" />
      </div>
    </div>
    <div class="action-items" v-if="state === 2">
      <div class="refuse-content">
        <div>老师点评</div>
        <el-input
          clearable
          type="textarea"
          rows="2"
          class="refuse-input"
          placeholder="请输入"
          v-model="updateData.rec_reason"
        />
        <el-button class="l-20px" type="primary" @click="updateImg">提交点评</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import request from '@/utils/request'
import { ElNotification } from 'element-plus'

const props = defineProps<{
  show: boolean
  listId: number
  state: number
}>()

const emit = defineEmits(['close'])

// 右侧点击预览
const selectImg = ref({
  idx: 0,
  url: ''
})

watch(
  () => props.show,
  async (nv, ov) => {
    if (nv) {
      await getImgDetail()
      if (data.value && data.value.length > 0) {
        selectImg.value.url = data.value[0].img_url
        selectImg.value.idx = 0

        const item = data.value[0]
        updateData.value.id = item.id
      }
    }
  }
)

const clickImg = (item, idx: number) => {
  selectImg.value.idx = idx
  selectImg.value.url = item.img_url

  updateData.value.state = item.state
  updateData.value.id = item.id
  updateData.value.rec_reason = item.rec_reason

  console.log(updateData.value.state)
}

// 通过/禁用
const updateData = ref({
  id: 0,
  state: 0,
  rec_reason: ''
})

const data = ref<ImgData[]>([])

const getImgDetail = async () => {
  await request({
    url: 'photo/img/detail',
    method: 'get',
    params: {
      list_id: props.listId
    }
  }).then((res) => {
    if (res.code === 200) {
      data.value = res.data
      console.log(data.value)
      if (selectImg.value.idx > 0) {
        updateData.value = data.value[selectImg.value.idx]
      }
    }
  })
}

// 提交点评
const updateImg = () => {
  if (updateData.value.rec_reason.length === 0) {
    ElNotification.error('请输入点评内容!')
    return
  }
  request({
    url: 'photo/img/update',
    method: 'post',
    data: updateData.value
  }).then((res) => {
    if (res.code === 200) {
      ElNotification.success('点评成功!')
      getImgDetail()
    } else {
      ElNotification.error(res.msg)
    }
  })
}
</script>

<style scoped lang="less">
.detail-bg {
  display: flex;
  flex-direction: row;

  .left-detail {
    display: flex;
    flex-direction: column;

    .detail-img {
      width: 134px;
      height: 82px;
      background: #f7f7fa;
      border-radius: 2px 2px 2px 2px;
      margin-top: 10px;
      cursor: pointer;
      position: relative;

      img {
        max-width: 100%;
        max-height: 100%;
      }

      .img-state {
        position: absolute;
        right: 0;
        top: 0;
        padding: 2px;
        border-radius: 4px;
        font-size: 10px;
      }

      .state-pass {
        background-color: green;
        color: #fff;
      }

      .state-reject {
        background-color: red;
        color: #fff;
      }

      .state-pend {
        background-color: orange;
        color: #fff;
      }
    }
  }

  .right-detail {
    margin-left: 10px;
    width: 698px;
    height: 590px;
    background: #f7f7fa;
    border-radius: 0px 0px 0px 0px;
    position: relative;

    .img-count {
      position: absolute;
      top: 6.25px;
      right: 62px;
      width: 48px;
      height: 24px;
      background: rgba(255, 255, 255, 1);
      border-radius: 22px 22px 22px 22px;
      font-weight: 400;
      font-size: 16px;
      color: #1d2129;
      line-height: 13px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      backdrop-filter: blur(4px);
    }

    .preview-detail {
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.action-items {
  margin-top: 20px;
  margin-left: 150px;
  display: flex;
  flex-direction: row;

  .refuse-content {
    margin-left: 20px;
    align-items: center;
    display: flex;
    flex-direction: row;
    font-size: 12px;

    .refuse-input {
      font-size: 12px;
      width: 300px;
      margin-left: 10px;
    }
  }
}
</style>
